<div class="default-background">
    <h2 class="flex-row-space-between">{{'AUTH_CENTER' |translate}} / {{'CLIENT_DASHBOARD'|translate}}</h2>
    <app-search (search)="doSearch($event)" [searchConfigs]="searchConfigs">
    </app-search>
    <div>
        <div class="table-container">
            <table mat-table [dataSource]="tableSource.dataSource">
                <ng-container matColumnDef="id">
                    <th mat-header-cell *matHeaderCellDef> {{columnList['id']|translate}} </th>
                    <td mat-cell *matCellDef="let row">
                        <app-copy-field [inputValue]="row.id"></app-copy-field>
                    </td>
                </ng-container>

                <ng-container matColumnDef="description">
                    <th mat-header-cell *matHeaderCellDef> {{columnList['description']|translate}} </th>
                    <td mat-cell *matCellDef="let row">
                        <app-copy-field [inputValue]="row.description"></app-copy-field>
                    </td>
                </ng-container>

                <ng-container matColumnDef="name" sticky>
                    <th mat-header-cell *matHeaderCellDef> {{columnList['name']|translate}} </th>
                    <td mat-cell *matCellDef="let row">
                        <app-copy-field [inputValue]="row.name"></app-copy-field>
                    </td>
                </ng-container>

                <ng-container matColumnDef="resourceIndicator">
                    <th mat-header-cell *matHeaderCellDef> {{columnList['resourceIndicator']|translate}}
                    </th>
                    <td mat-cell *matCellDef="let row">
                        <app-editable-boolean [inputValue]="row.resourceIndicator" [readOnly]="true"
                            (newValue)="doPatchBoolean(row.id,$event,'resourceIndicator')"></app-editable-boolean>
                    </td>
                </ng-container>

                <ng-container matColumnDef="grantTypeEnums">
                    <th mat-header-cell *matHeaderCellDef> {{columnList['grantTypeEnums']|translate}} </th>
                    <td mat-cell *matCellDef="let row">
                        <app-editable-select-multi [inputOptions]="getList(row.grantTypeEnums)"
                            [readOnly]="true"></app-editable-select-multi>
                    </td>
                </ng-container>

                <ng-container matColumnDef="accessTokenValiditySeconds">
                    <th mat-header-cell *matHeaderCellDef style="padding-left: 8px;padding-right: 8px;">
                        {{columnList['accessTokenValiditySeconds']|translate}}
                    </th>
                    <td mat-cell *matCellDef="let row" style="padding-left: 8px;padding-right: 8px;">
                        <app-editable-field [inputValue]="row.accessTokenValiditySeconds" [readOnly]="true">
                        </app-editable-field>
                    </td>
                </ng-container>


                <ng-container matColumnDef="resourceIds">
                    <th mat-header-cell *matHeaderCellDef> {{columnList['resourceIds']|translate}} </th>
                    <td mat-cell *matCellDef="let row">
                        <app-editable-page-select-multi [inputOptions]="getResourceList(row.resources)"
                            [readOnly]="true">
                        </app-editable-page-select-multi>
                    </td>
                </ng-container>

                <ng-container matColumnDef="more">
                    <th mat-header-cell *matHeaderCellDef class="table-icon">{{columnList['more']|translate}}</th>
                    <td mat-cell *matCellDef="let row" class="table-icon">
                        <mat-icon (click)="view(row.id)" [color]="'primary'">remove_red_eye</mat-icon>
                    </td>
                </ng-container>

                <ng-container matColumnDef="token">
                    <th mat-header-cell *matHeaderCellDef class="table-icon">{{columnList['token']|translate}}</th>
                    <td mat-cell *matCellDef="let row" class="table-icon" style="text-align: center;">
                        <mat-icon (click)="revokeClientToken(row.id)" [color]="'accent'">remove_circle</mat-icon>
                    </td>
                </ng-container>
                <tr mat-header-row *matHeaderRowDef="tableSource.displayedColumns(); sticky: true"></tr>
                <tr mat-row *matRowDef="let row; columns: tableSource.displayedColumns();"></tr>
            </table>
        </div>
        <mat-paginator [showFirstLastButtons]="true" [length]="tableSource.totoalItemCount"
            [pageIndex]="tableSource.pageNum" [pageSize]="tableSource.pageSize"
            (page)="tableSource.loadPage($event.pageIndex)">
        </mat-paginator>
    </div>
</div>